<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
</head>
<body>

<div id='device001'>
    <img src="./static/img/test.png" id="view" οndragstart=”return false;”>
    <div id="icons">
        <svg id='menu' class="white icon" t="1579166134972" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="3407">
            <path d="M896 1024h-213.333333a128 128 0 0 1-128-128v-213.333333a128 128 0 0 1 128-128h213.333333a128 128 0 0 1 128 128v213.333333a128 128 0 0 1-128 128z m-213.333333-384a42.666667 42.666667 0 0 0-42.666667 42.666667v213.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h213.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-213.333333a42.666667 42.666667 0 0 0-42.666667-42.666667z m-341.333334 384H128a128 128 0 0 1-128-128v-213.333333a128 128 0 0 1 128-128h213.333333a128 128 0 0 1 128 128v213.333333a128 128 0 0 1-128 128z m-213.333333-384a42.666667 42.666667 0 0 0-42.666667 42.666667v213.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h213.333333a42.666667 42.666667 0 0 0 42.666667-42.666667v-213.333333a42.666667 42.666667 0 0 0-42.666667-42.666667z m768-170.666667h-213.333333a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128h213.333333a128 128 0 0 1 128 128v213.333333a128 128 0 0 1-128 128z m-213.333333-384a42.666667 42.666667 0 0 0-42.666667 42.666667v213.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h213.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-42.666667-42.666667z m-341.333334 384H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128h213.333333a128 128 0 0 1 128 128v213.333333a128 128 0 0 1-128 128zM128 85.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v213.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h213.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-42.666667-42.666667z"
                  p-id="3408" fill="#ffffff"></path>
        </svg>

        <svg id='home' class="white icon" t="1579166296893" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="4974">
            <path d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m0-992A480 480 0 1 0 992 512 480 480 0 0 0 512 32z m224.256 512h-32v192a32 32 0 0 1-32 32h-320a32 32 0 0 1-32-32v-192h-32a32 32 0 0 1-32-32h-0.603429a14.756571 14.756571 0 0 1 1.536-4.589714 31.177143 31.177143 0 0 1 23.936-25.965715l222.921143-222.482285a9.673143 9.673143 0 0 1 15.433143 0l222.646857 222.226285A31.561143 31.561143 0 0 1 768.256 512a32 32 0 0 1-32 32zM512 294.509714L295.003429 512h56.996571v224h320V512h56.996571zM320.128 576z"
                  p-id="4975" fill="#ffffff"></path>
        </svg>

        <svg id='back' class="white icon" t="1579166254434" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="4201">
            <path d="M512 0C229.888 0 0 229.888 0 512s229.888 512 512 512 512-229.888 512-512S794.112 0 512 0z m0 915.968c-222.72 0-403.968-181.248-403.968-403.968S289.28 108.032 512 108.032s403.968 181.248 403.968 403.968-181.248 403.968-403.968 403.968z"
                  p-id="4202" fill="#ffffff"></path>
            <path d="M586.24 364.544H425.984l13.824-13.824c13.824-13.824 13.824-36.864 0-50.688s-36.864-13.824-51.2 0L308.224 379.904c-13.824 13.824-13.824 36.864 0 50.688l80.384 80.384c7.168 7.168 16.384 10.752 25.6 10.752 9.216 0 18.432-3.584 25.6-10.752 13.824-13.824 13.824-36.864 0-50.688l-3.584-3.584h150.016c37.376 0 67.584 36.864 67.584 82.432s-30.208 82.432-67.584 82.432h-230.4c-25.6 0-46.08 20.48-46.08 46.08s20.48 46.08 46.08 46.08h230.912c88.576 0 160.256-78.336 160.256-175.104s-72.192-174.08-160.768-174.08z"
                  p-id="4203" fill="#ffffff"></path>
        </svg>
    </div>
</div>

{#<p id="pos"></p>#}
</body>

<style>
    * {
        margin: 0px;
    }
</style>

<style>

    * {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    #device001 {
        width: 425px;
        height: 750px;
        background-image: url("./static/img/blackMobile.png");
        background-repeat: no-repeat;
        background-size: cover;
        margin-bottom: -30px;
    }

    #view {
        width: 383px;
        height: 580px;
        margin-top: 92px;
        margin-left: 22px;
    }

    #icons {
        width: 320px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-left: 55px;
        margin-top: 18px;
    }

    .icon {
        width: 30px;
        height: 30px;
    {#margin-left: 10px;#}{#margin-top: 5px;#}
    }

</style>


<script>
    var chatSocket = new WebSocket(
        'ws://' + window.location.host + '/ws/');

    chatSocket.onmessage = function (e) {
        {#console.log(e)#}
        var message = e.data;
        {#console.log(message)#}
        {#var blob = new Blob([message], {"type": "image\/jpeg"});#}
        var src = window.URL.createObjectURL(message);
        console.log(src);
        $('#view').attr('src', src);
    };

    chatSocket.onclose = function (e) {
        console.error('Chat socket closed unexpectedly');
    };
</script>


<script>

    down = false;

    $(document).ready(function () {
        $("#view").mouseover(function () {
            {#初始化#}
            if (down) {
                $("#view").trigger("mouseup");
                down = false;
            }
        });
        $("#view").mouseout(function () {
            {#清除#}
            if (down) {
                $("#view").trigger("mouseup");
                down = false;
            }
        });
    });


    $("#view").on("mousedown", function (e) {
        down = true;
        var o = $("#pos").html();
        added = ["按下：offsetX: ", e.offsetX, "offsetY: ", e.offsetY, "<br/>"].join(" ");
        $("#pos").html(added + o);

        sendCMD("DOWN", e.offsetX, e.offsetY);

        return false;
    })


    $("#view").on("mouseup", function (e) {
        down = false;
        var o = $("#pos").html();
        added = ["弹起：offsetX: ", e.offsetX, "offsetY: ", e.offsetY, "<br/>"].join(" ");
        $("#pos").html(added + o);

        sendCMD("UP", e.offsetX, e.offsetY);

        return false;
    })

    $("#view").on("mousemove",
        function (e) {

            if (down) {
                var o = $("#pos").html();
                added = ["移动至：offsetX: ", e.offsetX, "offsetY: ", e.offsetY, "<br/>"].join(" ");
                $("#pos").html(added + o);

                sendCMD("MOVE", e.offsetX, e.offsetY);

                return false;
            }

        }
    )

    $('#device001').click(
        function () {
            return false;
        }
    );

    $('#menu').click(
        function () {
            sendCMD("MENU");
            return false;
        }
    )
    $('#home').click(
        function () {
            sendCMD("HOME");
            return false;
        }
    )
    $('#back').click(
        function () {
            sendCMD("BACK");
            return false;
        }
    )

    function sendCMD(action, x = 0, y = 0) {
        width = $('#view').width();
        height = $('#view').height();

        console.log(width + " : " + height);

        if (x < 0) {
            x = 0;
        }

        if (y < 0) {
            y = 0;
        }

        x = x / width;
        y = y / height;

        console.log(x + y);


        {#cmd = "{action:" + action + ", x:" + x + ", y:" + y + "}";#}
        cmd = '{"action":"' + action + '", "x":"' + x + '", "y":"' + y + '"}';
        chatSocket.send(cmd);
        console.log(cmd);
    }
</script>


<style>

    #pos {
        float: left;
        color: red;
    }
</style>

</html>